<template>
<div class="cart">
    <nav-bar class="cart-nav"><div slot="center"> 购物车({{getCartLength}})</div>
    </nav-bar>

    <scroll class="cart-content" ref="scroll">
        <cart-list :cartList="cartList"></cart-list>
    </scroll>
    <cart-bottom-bar/>
</div>
</template>
<script>
import Scroll from "components/common/scroll/Scroll"
import NavBar from "components/common/navbar/NavBar"

import CartList from "./childComps/CartList"
import CartBottomBar from "./childComps/CartBottomBar"
export default {
    name:'Cart',
    components:{
        NavBar,
        Scroll,
        CartList,
        CartBottomBar
    },
    data(){
        return{
            cartList:[],
        }
    },
    activated(){
        this.cartList=this.$store.state.cartList;
        this.$refs.scroll.refresh();
    },
    methods:{},
    computed:{
        getCartLength(){
            return this.$store.state.cartList.length;
        }
    }
}
</script>
<style scoped>
.cart{
    height: 100vh;
    overflow: hidden;
}
.cart-nav{
    background: var(--color-tint);
    color: #fff;
}
.cart-content{
    height: calc(100% - 44px - 49px - 44px);
    overflow: hidden;
}
</style>